<template>
  <el-dialog
  title="预览文章"
  v-model="PreviewVisible"
  align-center
  @close="close"
  >
  <h2>{{data.list.title}}</h2>
  <div class="information"><span>{{data.list.createTime}} </span><span>{{filterPersonnel(data.list.creatorID)}} </span> <span> <el-icon class="iconView"><View /></el-icon>{{data.list.visits}} </span></div>
  <div class="footer" v-html="data.list.articleBody"></div>
  </el-dialog>
</template>

<script>
import { reactive, ref, watch } from 'vue'
import { filterPersonnel } from '@/filters/index.js'
export default {
  props: {
    PreviewVisible: {
      type: Boolean,
      required: true
    },
    PreviewList: {
      type: Object,
      required: true
    }
  },
  setup (props) {
    const data = reactive(
      { list: props.PreviewList }
    )
    watch(data.list, (count, prevCount) => {
      data.list = count.list
      console.log(data.list.creatorID)
      // data.list.creatorID = filterPersonnel(data.list.creatorID)
    })

    return {
      data,
      filterPersonnel
    }
  }
}
</script>
<style lang="scss" scoped>
.footer{
  border-top: 1px dashed gray;
  background-color: #f5f5f5;
  padding: 10px;
}

.information {
  font-size: 14px;
  span{
    margin-left: 5px;
  }
  .iconView {
  padding-bottom: -2px;
  margin-right: 5px;
}
}

</style>
